<template>
  <div class="tabbarbox">
    <div class="tabbaritembox" v-for="item in renderData" :key="item.id">
      <div class="tabbaricon" @click="gotabbar(item.id)">
        <img :src="item.srcac" alt="" v-if="item.id == active" />
        <img :src="item.src" alt="" v-else />
      </div>
      <div
        class="tabbarname"
        :class="item.id == active ? 'tabbarnameac' : ''"
        >{{ item.name }}</div
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { defineProps, defineEmits } from 'vue';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const props = defineProps<{
    active: Number;
  }>();
  const active = ref();
  active.value = props.active;
  const gotabbar = (item: any) => {
    active.value = item;
    console.log('执行了', active.value);

    if (item == 1) {
      router.push({
        name: 'dashboard',
      });
    }
    if (item == 2) {
      router.push({
        name: 'case',
      });
    }
    if (item == 3) {
      router.push({
        name: 'user',
      });
    }
  };
  const renderData = ref([
    {
      id: 1,
      name: '图谱学习',
      src: new URL('@/assets/images/1icon.png', import.meta.url).href, // 使用 import.meta.url
      srcac: new URL('@/assets/images/1iconac.png', import.meta.url).href, // 使用 import.meta.url
    },
    {
      id: 2,
      name: '病例学习',
      src: new URL('@/assets/images/2icon.png', import.meta.url).href, // 使用 import.meta.url
      srcac: new URL('@/assets/images/2iconac.png', import.meta.url).href, // 使用 import.meta.url
    },
    {
      id: 3,
      name: '我的',
      src: new URL('@/assets/images/3icon.png', import.meta.url).href, // 使用 import.meta.url
      srcac: new URL('@/assets/images/3iconac.png', import.meta.url).href, // 使用 import.meta.url
    },
  ]);
</script>

<style scoped>
  .tabbarbox {
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 750px;
    height: 140px;
    background: #fcfcfc;
    border: 1px solid rgba(153, 153, 153, 0.4);
    align-items: center;
    justify-content: center;
    z-index: 999;
  }
  .tabbaritembox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px 70px;

    width: 100px;
  }
  .tabbarname {
    font-size: 24px;
    color: #999999;
  }
  .tabbaricon img {
    width: 44px;
    height: 44px;
  }
  .tabbarnameac {
    color: #3d4957;
  }
</style>
